<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }

        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin: 50px;
        }
    </style>

</head>
<body>

<div>
    <input type="text" id="id" placeholder="请输入编号">
    <input type="text" id="name"  placeholder="请输入姓名">
    <input type="text" id="gender"  placeholder="请输入性别">
    <input type="button" value="添加" id="btn_add">
</div>
<table>
    <caption>学生信息表</caption>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>
    <tr>
        <td>1</td>
        <td>令狐冲</td>
        <td>男</td>
        <td><a href="java:void(0)" onclick="delTr(this)">删除</a></td>
    </tr>
    <tr>
        <td>2</td>
        <td>任我行</td>
        <td>男</td>
        <td><a href="java:void(0)" onclick="delTr(this)">删除</a></td>
    </tr>

    <tr>
        <td>3</td>
        <td>岳不群</td>
        <td>?</td>
        <td><a href="java:void(0)" onclick="delTr(this)">删除</a></td>
    </tr>
</table>
   <script>
       document.getElementById("btn_add").onclick=function(){
           //获取添加按钮对象，并给他绑定事件
            var id = document.getElementById("id").value;
            //获取id的对象
           var name = document.getElementById("name").value;
           //获取name对象
           var gender = document.getElementById("gender").value;
           //获取gender对象
                var td_id= document.createElement("td");
                //创建td单元格
                 var text_id = document.createTextNode(id);
                 //将id转化为id节点
           td_id.appendChild(text_id);//将id节点添加到td单元格中
           var td_name= document.createElement("td");
           //创建姓名单元格
           var text_name = document.createTextNode(name);
           //创建姓名节点
       td_name.appendChild(text_name);//将姓名节点添加到单元格中
           var td_gender= document.createElement("td");
           //创建gender单元格
           var text_gender = document.createTextNode(gender);
           //创建gender对象节点
      td_gender.appendChild(text_gender);//将gender节点添加到单元格中
        var  td_a=document.createElement("td");
        //创建超链接单元格
              var ele_a = document.createElement("a");
              //创建超链接标签
               ele_a.setAttribute("href","javascript:void(0);");
               //设置超链接属性
               ele_a.setAttribute("onclick","delTr(this);");
              // 设置事件属性
                   var text_a = document.createTextNode("删除");
                   //创建删除节点
                      ele_a.appendChild(text_a);//将删除节点添加到删除对象中
                       td_a.appendChild(ele_a);//将超链接标签添加到单元格中
           var tr = document.createElement("tr");
           //创建tr行数
              tr.appendChild(td_id);//将id单元格添加到trz中
           tr.appendChild(td_name);//将id单元格添加到tr中
           tr.appendChild(td_gender);//将grngder单元格添加到行中
            tr.appendChild(td_a);//将超链接单元格添加到行中
            var table = document.getElementsByTagName("table")[0];
            //获取表格对象
             table.appendChild(tr);//将行数添加到表格中
       }
       function delTr(object){//
            var table=object.parentNode.parentNode.parentNode;//
            var tr=object.parentNode.parentNode;//
             table.removeChild(tr);//
       }

   </script>//
</body>
</html>